<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
{% load staticfiles %}

<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="{% static  '/css/login.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static  '/css/animate.css' %}">
    <script src="{% static '/js/vue.js' %}"></script>
    <script src="{% static '/js/jquery-3.3.1.js' %}"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    {#    <script type="text/javascript" src="{% static '/js/jquery.colorAnimations.js' %}"></script>#}
</head>

<body>
<div id="example" class="animated flipInY">
    <!--<div id="example">-->
    <transition name="login-rotate" mode="out-in">

        <div id="login-div" v-if="loginDivShow" key="login">
            <div id="login-form-container">
                <form method="post" id="login-form">
                    {% csrf_token %}
                    <dl class="form-list">
                        <li>
                            <h3 id="login-title">少侠何许人也？</h3>
                        </li>
                        <li>

                            <label for="login-username" id="login-username-label">
                                称号:
                            </label>
                            <br><input type="text" id="login-username" name="login_username">

                        </li>
                        <li>
                            <label for="login-password" id="login-password-label">
                                暗号:
                            </label>
                            <br>
                            <input type="password" id="login-password" name="login_password">
                        </li>
                        <li>
                            {#                            <input type="submit" id="login-submit" value="正是在下！" v-on:click="login_submit_effect">#}
                            <button type="button" id="login-submit">正是在下！</button>
                        </li>
                    </dl>
                </form>
            </div>
            <button class="rotate_button" @click="loginDivShow = !loginDivShow"></button>
        </div>
        <div id="signup-div" v-else="!loginDivShow" key="signup">
            <div id="signup-form-container">
                <form>
                    <ul class="signup-form-list">
                        <li>
                            <label for="signup-username" class="signup-label">称号: </label>
                            <input type="text" name="signup-username" value="" id="signup-username">
                        </li>
                        <li>
                            <label for="signup-nickname" class="signup-label">假名: </label>
                            <input type="text" name="signup-nickname" value="" id="signup-nickname">
                        </li>
                        <li>
                            <label for="signup-password" class="signup-label">暗号: </label>
                            <input type="password" name="signup-password" value="" id="signup-password">
                        </li>
                        <li>
                            <label for="confirmed-password" class="signup-label">确认暗号</label><br>
                            <input type="password" name="confirmed_password" value="" id="confirmed-password">
                        </li>
                        <li>
                            <label class="signup-label">your gender: </label>
                            <input type="radio" name="signup-gender" value="male" id="male-radio">
                            <label for="male-radio" class="signup-label">男</label>
                            <input type="radio" name="signup-gender" value="female" id="female-radio">
                            <label for="female-radio" class="signup-label">女</label>
                        </li>
                        <li>
                            <label for="signup-qq" class="signup-label">扣扣: </label><br>
                            <input name="qq" value="" id="signup-qq" type="text">
                        </li>
                        <li>
                            <input type="submit" value="submit">
                        </li>
                    </ul>
                </form>
            </div>
            <button class="signup-rotate_button" @click="loginDivShow = !loginDivShow">here transform</button>
        </div>

    </transition>
</div>`
<script>
    var error = {{ errorCode|safe }};
    switch(error)
    {
        case 0:
            break;
        case 1:
            alert("对不起没有该用户");
            break;
        case 2:
            alert("请输入正确密码!");
    }
    $(document).ready(
        function () {
            $("#login-submit").click(function () {
                console.log("click");
                $("#login-submit").animate(
                    {
                        transform: "rotate(90deg)",
                        width: "0px",
                        height: "0px",
                        fontSize: "0px"
                    },
                    20,
                    function () {
                        $("#login-form").append("<input class=\"fake-value\" type=\"text\" name=\"loginDivShow\" value=\""+mainDiv+"\"></input>")
                        console.log("animation end");
                        $(".fake-value").hide();
                        $("#login-form").submit();
                        $(".fake-value").remove();
                    }
                )
            })
        }
    );

    var mainDiv = new Vue({
        el: "#example",
        data: {
            loginDivShow: true
        }
    });

</script>
</body>

</html>